<template>
  <a-spin class="w-[100%]" :spinning="loading">
    <div class="flex gap-4 flex-col">
      <div class="grid lg:grid-cols-2 gap-4 flex-wrap">
        <a-card title="快捷导航" class="flex-1">
          <div class="grid grid-cols-3 gap-8">
            <a-card
              class="cursor-pointer"
              v-for="item in routerList"
              :key="item.name"
              @click="selectItem(item.router)"
            >
              <div class="text-[1.3rem] font-bold">
                {{ t(item.name) }}
              </div>
              <div class="text-gray-400 mt-6">{{ item.desc }}</div>
            </a-card>
          </div>
        </a-card>

        <a-card class="flex-1 status" :loading="loading" :title="t('状态')">
          <div class="grid grid-cols-3 gap-4" v-if="state">
            <a-card :body-style="{ padding: 0 }">
              <h1>{{ t('标签状态') }}</h1>
              <div class="tag-items">
                <a-statistic
                  :value-style="{ color: 'green' }"
                  :title="t('在线')"
                  :value="state.tag.online"
                />
                <a-statistic
                  :title="t('离线')"
                  :value-style="{ color: 'red' }"
                  :value="state.tag.offline"
                />
              </div>
            </a-card>
            <a-card :body-style="{ padding: 0 }">
              <h1>{{ t('基站状态') }}</h1>
              <div class="tag-items">
                <a-statistic
                  :title="t('在线')"
                  :value-style="{ color: 'green' }"
                  :value="state.station.online"
                />
                <a-statistic
                  :title="t('离线')"
                  :value-style="{ color: 'red' }"
                  :value="state.station.offline"
                />
              </div>
            </a-card>

            <a-card :body-style="{ padding: 0 }">
              <h1>{{ t('下发') }}</h1>
              <div class="tag-items">
                <a-statistic
                  :title="t('已完成')"
                  :value-style="{ color: 'green' }"
                  :value="state.queue.updated"
                />
                <a-statistic
                  :title="t('已过期')"
                  :value-style="{ color: 'red' }"
                  :value="state.queue.timeout"
                />
                <a-statistic
                  :title="t('更新中')"
                  :value-style="{ color: 'orange' }"
                  :value="state.queue.updating"
                />
              </div>
            </a-card>
          </div>
        </a-card>
      </div>
      <a-card :title="t('设备变动频次')">
        <div id="device" :key="update"></div>
      </a-card>
    </div>
  </a-spin>
</template>

<script setup lang="ts">
import { LineChart, PieChart } from 'echarts/charts';
import {
  GridComponent,
  LegendComponent,
  TitleComponent,
  TooltipComponent,
} from 'echarts/components';
import * as echarts from 'echarts/core';
import { LabelLayout, UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import { onMounted } from 'vue';
import { deviceData } from './data';
import { getHomePageState, type HomeState } from '@/api/modules/esl/home';
import { gotoRouter } from '@/router/utils';
import { useI18n } from 'vue-i18n';

echarts.use([
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  PieChart,
  CanvasRenderer,
  LabelLayout,
  LineChart,
  UniversalTransition,
  GridComponent,
]);

const { t } = useI18n();
const update = ref(0);
const loading = ref();
const state = ref<HomeState>();
let charts: echarts.ECharts | undefined = undefined;
const routerList = [
  {
    name: '下发中心',
    router: 'distribution',
    desc: '单个设备下发预览',
  },
  {
    name: '我的标签',
    router: 'priceTag',
    desc: '管理所有的标签',
  },
  {
    name: '我的模板',
    router: 'template',
    desc: '管理绘制的模板',
  },
];
const selectItem = (routerName: string) => {
  gotoRouter(routerName);
};
const setCharts = () => {
  const dom = document.getElementById('device');
  if (dom) {
    dom.querySelector('canvas');
    charts = echarts.init(dom);
  }
};
const getData = async () => {
  loading.value = true;
  const { data } = await getHomePageState();
  state.value = data.data;
  deviceData.value.xAxis.data = Object.keys(state.value.hz).map((e: any) => e);
  nextTick(() => {
    if (!charts) return;
    charts.setOption(deviceData.value, true);
    loading.value = false;
  });
};
onMounted(async () => {
  setCharts();
  getData();
});
</script>

<style lang="scss" scoped>
#device {
  height: 300px;
}

.status {
  .ant-card {
    border: none;
  }

  :deep(.ant-tag) {
    width: 48px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    margin-top: 8px;
  }

  .tag-items {
    display: flex;
    gap: 12px;
    margin-top: 12px;

    span {
      color: #999;
    }
  }
}
</style>
@/api/modules/esl
